<template>
  <div class="app-container">
    <el-tabs v-model="activeName"  type="card" @tab-click="handleClick">
      <el-tab-pane label="待支付" name="0"></el-tab-pane>
      <el-tab-pane label="待处理" name="1"></el-tab-pane>
      <el-tab-pane label="进行中" name="2"></el-tab-pane>
      <el-tab-pane label="已注册" name="3"></el-tab-pane>
      <el-tab-pane label="已注销" name="4"></el-tab-pane>
    </el-tabs>
    <el-form  size="mini" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="国家/地区" prop="companyName">
        <el-select v-model="queryParams.companyGuojia" placeholder="国家/地区" style="width: 100%;">
          <el-option
            v-for="dict in yjlmGuojiaOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入公司名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['web:company:add']"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['web:company:edit']"
            >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['web:company:remove']"
            >删除
            </el-button>
          </el-col>
<!--          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['web:company:export']"
            >导出
            </el-button>
          </el-col>-->
        </el-row>
      </el-form-item>
    </el-form>


    <el-table v-loading="loading" size="mini" border :data="companyList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="公司名称" align="center" prop="companyName" width="140"/>
      <el-table-column label="公司邮箱" align="center" prop="companyEmail" width="140"/>
      <el-table-column label="注册资本" align="center" prop="companyMoney" width="100"/>
      <el-table-column label="经营范围" prop="companyFanwei">
        <template slot-scope="scope">
          <span style="color: #2f3337;font-size: 12px;">{{scope.row.companyFanwei}}</span>
        </template>
      </el-table-column>


      <el-table-column label="管理层证件" align="center" width="100">
        <template slot-scope="scope">
          <span style="color: #00afff;cursor: pointer;" @click="gdzjMethod(scope.row)">查看</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="是否一致" align="center" prop="companyGdxxyz" :formatter="companyGdxxyzFormat"/>-->
      <el-table-column label="支付状态" align="center" prop="companyPayStatus" width="80" :formatter="companyPayStatusFormat"/>
      <el-table-column label="支付时间" align="center" prop="companyPayTime" width="160"/>
      <el-table-column label="公司文件" align="center" prop="companyFile1" width="100">
        <template slot-scope="scope">
          <span style="color: #00afff;cursor: pointer;" @click="gsxxMethod(scope.row)">查看</span>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="companyStatus" width="80" :formatter="companyStatusFormat"/>
      <el-table-column label="审核时间" align="center" prop="companyHandleTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.companyHandleTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="exportInfo(scope.row.id)"
            v-hasPermi="['web:company:edit']"
          >导出信息
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['web:company:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['web:company:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改公司实体对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      v-dialogDrag
      class="my_dialog">
      <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="140px">
        <el-form-item label="国家/地区" prop="companyName">
          <el-select v-model="form.companyGuojia" placeholder="国家/地区" style="width: 100%;">
            <el-option
              v-for="dict in yjlmGuojiaOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="form.companyName" placeholder="请输入公司名称"/>
        </el-form-item>
        <el-form-item label="公司邮箱" prop="companyEmail">
          <el-input v-model="form.companyEmail" placeholder="请输入公司邮箱"/>
        </el-form-item>
        <el-form-item label="注册资本" prop="companyMoney">
          <el-input v-model="form.companyMoney" placeholder="请输入注册资本"/>
        </el-form-item>

        <el-form-item label="经营范围" prop="companyFanwei">
          <el-input v-model="form.companyFanwei" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="股东身份证正面">
              <uploadImage v-model="form.companyDongshiCardzm1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="股东身份证反面">
              <uploadImage v-model="form.companyDongshiCardfm1"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="股东与董事是否一致" prop="companyGdxxyz">
          <el-select v-model="form.companyPayStatus" placeholder="请选择是否一致" style="width: 100%;">
            <el-option
              v-for="dict in companyGdxxyzOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="董事身份证正面">
              <uploadImage v-model="form.companyDongshiCardzm2"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="董事身份证反面">
              <uploadImage v-model="form.companyDongshiCardfm2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="注册证书">
              <uploadImage v-model="form.companyFile1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织章程">
              <uploadImage v-model="form.companyFile2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="审核时间" prop="companyHandleTime">
          <el-date-picker
            clearable
            v-model="form.companyHandleTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择审核时间" style="width: 100%;">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="支付状态" prop="companyPayStatus">
          <el-select v-model="form.companyPayStatus" placeholder="请选择支付状态" style="width: 100%;">
            <el-option
              v-for="dict in companyPayStatusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付时间" prop="companyPayTime">
          <el-input v-model="form.companyPayTime" placeholder="请输入支付时间" style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="公司审核状态" prop="companyStatus">
          <el-select v-model="form.companyStatus" placeholder="请选择公司审核状态" style="width: 100%;">
            <el-option
              v-for="dict in companyStatusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 查看股东图片 -->
    <el-dialog
      :title="dstpTitle"
      :visible.sync="dstpOpen"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      v-dialogDrag
      class="my_dialog">
      <el-form size="mini" label-position="top" label-width="140px">
        <el-form-item label="股东证件信息">
          <el-row>
            <el-col :span="12">
              <el-image
                style="width: 220px; height: 220px;"
                :src="form.companyDongshiCardzm1"
                :preview-src-list="[form.companyDongshiCardzm1]">
              </el-image>
            </el-col>
            <el-col :span="12">
              <el-image
                style="width: 220px; height: 220px;"
                :src="form.companyDongshiCardfm1"
                :preview-src-list="[form.companyDongshiCardfm1]">
              </el-image>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="股东与董事是否一致" prop="companyGdxxyz">
          <span v-if="form.companyGdxxyz=='0'">否</span>
          <span v-if="form.companyGdxxyz=='1'">是</span>
        </el-form-item>

        <el-form-item label="董事证件信息">
          <el-row>
            <el-col :span="12">
              <el-image
                style="width: 220px; height: 220px;"
                :src="form.companyDongshiCardzm2"
                :preview-src-list="[form.companyDongshiCardzm2]">
              </el-image>
            </el-col>
            <el-col :span="12">
              <el-image
                style="width: 220px; height: 220px;"
                :src="form.companyDongshiCardfm2"
                :preview-src-list="[form.companyDongshiCardfm2]">
              </el-image>
            </el-col>
          </el-row>
        </el-form-item>

      </el-form>
    </el-dialog>


    <!-- 查看公司图片 -->
    <el-dialog
      :title="gsxxTitle"
      :visible.sync="gsxxOpen"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      v-dialogDrag
      class="my_dialog">
      <el-form ref="form" :model="form" size="mini" label-width="68px">
        <el-tabs type="card">
          <el-tab-pane label="注册证书">
            <el-form-item label="注册证书">
              <single-upload v-model="form.companyFile1" @input="onInput()"/>
            </el-form-item>
<!--              <el-image
                style="height: 340px;"
                :src="form.companyFile1"
                :preview-src-list="[form.companyFile1]">
                <single-upload v-model="form.otherFiles[index].qtwjPath" @input="onInput()"/>
            </el-image>-->
          </el-tab-pane>
          <el-tab-pane label="组织章程">
            <el-form-item label="组织章程">
              <single-upload v-model="form.companyFile2" @input="onInput()"/>
            </el-form-item>
<!--            <el-image
            style="height: 340px;"
            :src="form.companyFile2"
            :preview-src-list="[form.companyFile2]">
          </el-image>-->
          </el-tab-pane>
          <el-tab-pane label="其他文件">
            <span style="color: #00afff;cursor: pointer;margin-bottom: 15px;" @click="addOtherFiie()">添加</span>
            <div v-for="(item,index) in this.form.otherFiles" :key="index">
              <el-form-item label="文件名称">
                <el-input v-model="form.otherFiles[index].qtwjTitle" @input="onInput()" placeholder="请输入标题" style="width: 100%;"/>
              </el-form-item>
              <el-form-item label="文件说明">
                <el-input v-model="form.otherFiles[index].qtwjContent" @input="onInput()" type="textarea" placeholder="请输入内容" />
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  文件上传<br>
                  <span style="color: red;cursor: pointer;margin-bottom: 15px;" @click="deleteWj(index);">刪除</span>
                </span>
                <single-upload v-model="form.otherFiles[index].qtwjPath" @input="onInput()"/>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
<!--          <el-row>
            <el-col :span="12">
              <el-form-item label="注册证书">
              <el-image
                style="width: 220px; height: 220px;"
                :src="form.companyFile1"
                :preview-src-list="[form.companyFile1]">
              </el-image>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织章程">
                <el-image
                  style="width: 220px; height: 220px;"
                  :src="form.companyFile2"
                  :preview-src-list="[form.companyFile2]">
                </el-image>
              </el-form-item>
            </el-col>
          </el-row>

        <el-tabs v-model="aaa">el-tab-pane label="其他文件" name="first"/>
          <
        </el-tabs>
        <span style="color: #00afff;margin-left: 35px;" @click="addOtherFiie()">添加</span></span> &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;
        <div v-for="(item,index) in this.form.otherFiles" :key="index">
          <el-form-item label="文件名称">
            <el-input v-model="form.otherFiles[index].qtwjTitle" placeholder="请输入标题" style="width: 100%;"/>
          </el-form-item>
          <el-form-item label="文件说明">
            <el-input v-model="form.otherFiles[index].qtwjContext" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="上传文件">
            <single-upload v-model="form.otherFiles[index].qtwjPath"/>
          </el-form-item>
        </div>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {listCompany, exportInfo, getCompany, delCompany, addCompany, updateCompany, exportCompany} from "@/api/sbxm/company/company";
import UploadImage from '@/components/UploadImage';
import SingleUpload from "../../../components/UploadImage/singleUpload";

export default {
  name: "Company",
  components: {
    SingleUpload,
    UploadImage,
  },
  data() {
    return {
      activeName: "0",
      aaa: "first",
      dstpTitle: "",
      dstpOpen: false,
      gsxxTitle: "",
      gsxxOpen: false,

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公司实体表格数据
      companyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否与股东信息一致字典
      companyGdxxyzOptions: [],
      // 支付状态字典
      companyPayStatusOptions: [],

      // 国家/地区字典
      yjlmGuojiaOptions: [],
      // 公司审核状态字典
      companyStatusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: null,
        companyStatus: null,
        companyGuojia: null
      },
      // 表单参数
      form: {
        otherFiles:[]
      },
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
    this.getDicts("guojiaCode").then(response => {
      this.yjlmGuojiaOptions = response.data;
    });
    this.getDicts("shifouCode").then(response => {
      this.companyGdxxyzOptions = response.data;
    });
    this.getDicts("payStatusCode").then(response => {
      this.companyPayStatusOptions = response.data;
    });
    this.getDicts("companyStatusCode").then(response => {
      this.companyStatusOptions = response.data;
    });
  },
  methods: {
    /** 查询公司实体列表 */
    getList() {
      this.loading = true;
      listCompany(this.queryParams).then(response => {
        this.companyList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    handleClick(e){
      this.activeName = e.index;
      this.queryParams.yjlmGuojia = e.label;
      this.queryParams.yjlmTitle = "";
      this.getList();
    },

    // 是否与股东信息一致字典翻译
    companyGdxxyzFormat(row, column) {
      return this.selectDictLabel(this.companyGdxxyzOptions, row.companyGdxxyz);
    },
    // 支付状态字典翻译
    companyPayStatusFormat(row, column) {
      return this.selectDictLabel(this.companyPayStatusOptions, row.companyPayStatus);
    },
    // 公司审核状态字典翻译
    companyStatusFormat(row, column) {
      return this.selectDictLabel(this.companyStatusOptions, row.companyStatus);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.dstpOpen = false;
      this.gsxxOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        beginTime: null,
        createBy: null,
        createTime: null,
        endTime: null,
        remark: null,
        searchValue: null,
        updateBy: null,
        updateTime: null,
        companyDongshiCardfm1: null,
        companyDongshiCardfm2: null,
        companyDongshiCardzm1: null,
        companyDongshiCardzm2: null,
        companyEmail: null,
        companyFanwei: null,
        companyFile1: null,
        companyFile2: null,
        companyFile3: null,
        companyGdxxyz: null,
        companyHandleTime: null,
        companyMoney: null,
        companyName: null,
        companyPayStatus: null,
        companyPayTime: null,
        otherFiles:[],
        companyStatus: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 查看证件 */
    gdzjMethod(row) {
      getCompany(row.id).then(response => {
        this.form = response.data;
        console.log(this.form)
        this.dstpOpen = true;
        this.dstpTitle = "股东信息";
      });
    },

    gsxxMethod(row){
      getCompany(row.id).then(response => {
        this.form = response.data;
        this.gsxxOpen = true;
        this.gsxxTitle = "股东信息";
      });
    },

    /** 查看证件 */
    addOtherFiie() {
      console.log(1)
      console.log(this.form.otherFiles)
      this.form.otherFiles.push({qtwjTitle:"",qtwjPath:"",qtwjContent:"",objId: this.form.id});
      //console.log(this.form.otherFiles)
      this.$forceUpdate();
    },

    deleteWj(index){
      this.form.otherFiles.splice(index,1);
      this.$forceUpdate();
      console.log(this.form.otherFiles)
    },

    onInput(){
      this.$forceUpdate();
    },


    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加公司实体";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCompany(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改公司实体";
      });
    },

    /** 下载模板操作 */
    exportInfo(id) {
      exportInfo(id).then(response => {
        this.download(response.msg);
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCompany(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                if(this.open){
                  this.open = false;
                  this.getList();
                }else{
                  this.dstpOpen = false;
                  this.gsxxOpen = false;
                }
              }
            });
          } else {
            addCompany(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delCompany(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有公司实体数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportCompany(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
    }
  }
};
</script>
